<template>
	<view class="set">
		<view class="content" @tap="goUser">
			<view class="user">
				<image :src="userLogo" mode=""></image>
			</view>
			<view class="name">
				<view class="top">
					{{userName}}
				</view>
				<view class="id">
					ID:{{userId}}
				</view>
			</view>
			<view class="right">
				<image src="../../static/images/arrows-right.png" mode=""></image>
			</view>
		</view><strong></strong>
		<view class="list">
			<view class="top">
				<view class="left" @tap="goAddress">
					我的收货地址
				</view>
				<view class="right">
					<image src="../../static/images/arrows-right.png" mode=""></image>
				</view>
			</view>
			<view class="top second" @tap="goSafe">
				<view class="left">
					账户与安全
				</view>
				<view class="right">
					<image src="../../static/images/arrows-right.png" mode=""></image>
				</view>
			</view>
			<view class="top" @tap="goAbout">
				<view class="left">
					关于
				</view>
				<view class="right">
					<image src="../../static/images/arrows-right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="quit" @tap="logout">
			退出登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userLogo: '../../static/images/user.png',
				userId:"",
				userName:""
			}
		},
		onShow() {
			this.userName = uni.getStorageSync('nickName')
			this.userId = uni.getStorageSync('userId')
			this.userLogo = uni.getStorageSync('userLogo')
		},
		methods: {
			logout(){
				uni.showModal({
					title:"确定退出登录？",
					showCancel:true,
					success:res=>{
						if(res.confirm){
							  uni.clearStorageSync();
							  
							  uni.navigateTo({
							  	url:'../login/login'
							  })
						}
					}
				})
			},
			goUser(){
				uni.navigateTo({
					url:'../user/user'
				})
			},
			goSafe(){
				uni.navigateTo({
					url:'/pages/setting/safe'
				})
			},
			goAbout(){
				uni.navigateTo({
					url:'/pages/about/about'
				})
			},
			goAddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			}
		}
	}
</script>

<style lang="scss">
	.set{
		background-color: #f2f2f2;
		height: 100vh;
		box-sizing: border-box;
	
	.content{
		display: flex;
		align-items: center;
		background:rgba(255,255,255,1);
		height: 160upx;
		.user{
			width: 100upx;
			margin-left: 28upx;
			image{
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				background:rgba(246,78,106,1);
			}
		}
		.name{
			width:552upx ;
			margin-left: 20upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			.id{
				font-size:24upx;
				font-weight:500;
				color:rgba(77,77,77,1);
			}
		}
		.right{
			width: 20upx;
			image{
				width: 20upx;
				height: 20upx;
			}
		}
	}
	.list{
		margin-top: 10upx;
		.second{
			border-bottom:1upx solid #F0F0F0;
			border-top:1upx solid #F0F0F0;
		}
		.top{
			display: flex;
			align-items: center;
			height: 100upx;
			background:rgba(255,255,255,1);
			padding: 0 30upx;
			.left{
				font-size:32upx;
				font-weight:500;
				color:rgba(51,51,51,1);
				width: 690upx;
			}
			.right{
				width: 20upx;
				image{
					width: 20upx;
					height: 20upx;
				}
			}
		}
		
	}
	.quit{
		margin-top: 30upx;
		display: flex;
		justify-content: center;
		font-size:32upx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:100upx ;
		background:rgba(255,255,255,1);
	}
}
</style>
